<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ActiveForm;
use yii\web\Session;
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <title>后台管理系统</title>
    <style type="text/css">
        *{margin:0; padding:0; border:0}
        #box{
            font-family:微软雅黑, Arial, Helvetica;
            overflow: hidden;
        }
        a{
            text-decoration:none;
            border: 0;
        }
        .box-img{
            width:100%;
            height:100%;
        }
        .login-form{
            padding-top: 30px;
            width:400px;
            margin:0 auto;
        }
        .login-form input{
            font-size:16px;
            color:#8b8b8b;
            border:1px solid #d0d0d0;
            border-radius:5px;
            width:350px;
            height:45px;
            padding-left:50px;
            float:left;
        }
        .user{
            background:url(admin/style/img/login_admin.jpg) no-repeat 8px;
        }
        .password{
            background:url(admin/style/img/login_password.jpg) no-repeat 8px;
        }
        .validate{
            float: left;
        }
        .validate input{
            margin-top:0!important;
            font-size:18px!important;
            padding-left:10px!important;
            width:200px!important;
            height:30px!important;
        }
        .validate img{
            float:left;
            padding:0 5px;
        }
        .validate-click{
            background:url(admin/style/img/login_renovate.jpg) no-repeat right;
            height:24px;
            line-height:24px;
            padding:3px 30px 3px 3px;
            display: inline-block;
            font-size:12px;
            color:#9d9d9d;
        }
        .help-block{
            color:#E32313;
            font-size:12px;
            height:20px;
            line-height:20px;
            width:400px;
            float: left;
        }
        .submit{
            margin-top:5px;
            border:1px solid #d0d0d0;
            border-radius:5px;
            width:350px;
            height:45px;
            background:url(admin/style/img/submit-bg.png) repeat-x;
            width:400px!important;
            padding:0!important;
            color:#FFFFFF!important;
            font-size:18px!important;
        }
    </style>
    <script type="text/javascript" src="admin/js/jquery-1.9.0.min.js"></script>
</head>
<body>
<div id="box">
    <img class="box-img" src="admin/style/img/login_bg.jpg"/>
    <?php $form=ActiveForm::begin([//表单开始
        'enableClientValidation' => true, //是否启用客户端验证
        'id'=>'login-form',
        'method'=>'post',//提交方式
        'options' => ['class' => 'login-form']//自定义样式
    ]);?>
    <?= $form->field($model, 'user')->textInput(['class'=>'user','placeholder'=>'用户名']); ?>
    <?= $form->field($model, 'password')->passwordInput(['class'=>'password','placeholder'=>'用户密码']); ?>
    <!--下面是验证码-->

    <!--验证码从这里结束-->
    <?= Html::submitButton('登陆',['class'=>'submit']) ?>
    <!--<input class="submit" name="submit" type="submit" value="<?php /*echo Yii::t('app','login_button')*/?>">-->
    <?php
    ActiveForm::end();//表单结束
    ?>
    <script type="text/javascript">
        $(function(){
            //trigger字面意思是触发，当点击a的时候也触发b的click事件
            $('.validate-click').click(function(){
                $('#captchaimg').trigger('click');
            });
            //下面的部分是数据的前端验证，以后好尽量对其进行封装
            $('#login-form').submit(function(){
                if(lengthValidate('user',4)){
                }else{
                    return false;
                }
                if(lengthValidate('password',6)){
                }else{
                    return false;
                }
                return true;
            });
            function lengthValidate(name,l){//验证字符串的长度
                $key_length=$('.'+name+'').val().length;
                $key_length=$("input[name='"+name+"']").val().length;
                if($key_length<l){
                    return false;
                }
                return true;
            }
        });
    </script>
</div>
</body>
</html>